<template>
  <view>
    <view style="font-size: 26upx; text-align: center">
      独角兽企业孵化加速器分布
    </view>
    <u-swiper
      :list="SwiperList"
      keyName="img_url"
      indicatorMode="line"
      circular
      indicator
      :autoplay="false"
      :current="currentIndex"
      @click="handleSwiperChange"
      :height="240"
    ></u-swiper>
    <uTabs :baseList="tabBasicList" @change="tabChange" />
    <view style="font-size: 30upx; text-align: center"
      >{{ city }}城市孵化器</view
    >

    <view class="desc">
      {{ textContent }}
    </view>
    <view style="padding: 0upx 20px">
      <u-button>孵化器资讯</u-button>
      <!-- <view style="font-size: 30upx;text-align: center">孵化器资讯</view> -->
      <view style="margin-bottom: 20upx" v-for="item in 4">
        <view style="margin-top: 20upx">
          <mainList :baseList="topCompanyBasicList" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mainList from "@/components/mainList/index.vue";
import uTabs from "@/components/uTabs/index.vue";
export default {
  components: {
    mainList,
    uTabs,
  },
  data() {
    return {
      array: ["中国", "美国", "巴西", "日本"],
      index: 0,
      tabBasicList: [],
      checkboxValue1: [],
      // 基本案列数据
      currentIndex: 0,
      topCompanyBasicList: [],
      city: "",
      SwiperList: [],
      textContent: "",
    };
  },
  onShow() {
    this.getList();
  },
  methods: {
    handleSwiperChange(i) {
      console.log(i);
    },
    async getList() {
      const res = await this.$api.getFuhuaqi({});
      console.log(res);
      this.SwiperList = res.map((item) => {
        return item.image;
      });
      console.log(this.SwiperList);
      //城市tabs数据处理
      this.tabBasicList =
        res?.map((item) => ({
          name: item.city_name,
          label: item.small_text,
        })) || [];

      // 设置城市和文本内容
      if (this.tabBasicList.length > 0) {
        this.city = this.tabBasicList[0].name;
        this.textContent = this.tabBasicList[0].label; // 注意这里应该是 'label'
      }
      //资讯数据处理
      this.topCompanyBasicList = res?.map((item) => {
        return {
          ...item,
          img_url: item.image,
          name: item.title,
          desc_text: item.small_text,
          tag: item.create_time,
          msg: item.address,
        };
      });
    },
    tabChange(e) {
      console.log(e);
      this.city = e.name;
      this.currentIndex = e.index;
      this.textContent = e.label;
    },
  },
};
</script>

<style scoped lang="scss">
.desc {
  margin-top: 20upx;
  font-size: 24upx;
  color: #666;
  margin-bottom: 20upx;
  background: #e5efff;
  padding: 20upx;
}
</style>